<div data-page="recommendedmovies" class="page">
    <style>
        .movie-album-list.list-block {
            margin: 0;
        }
        .search-list.list-block {
            margin: 0;
        }
        .list-block.no-border ul:before {
            background-color: transparent;
        }
    </style>
    <form class="searchbar searchbar-init bg-custom" action="#">
        <a href="#" data-popup=".popup-filter" class="open-popup" style="display: inherit;">
            <i class="icon wx-icon-filter"></i>
            <span class="wx-word-filter">筛选</span>
        </a>
        <div class="searchbar-input">
            <input type="search" placeholder="影片搜索"/>
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">取消</a>
    </form>
    <div class="page-content infinite-scroll" data-distance="50">
        <div class="search-invalid">
            <!-- Slider container -->
            <div class="swiper-container movie-banner-swiper" style="font-size: 0;">
                <!-- Slides wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    {{#each banners}}
                        <div class="swiper-slide">
                            {{#if banner_type}}
                                <a class="external" href="{{banner_url}}">
                                    <img onerror="onAlbumPosterError(this)" src="{{MOVIE_BANNER_POSTER banner_poster}}"
                                         style="width: 100%;height: 50vw">
                                </a>
                            {{else}}
                                <a data-ignore-cache="true" href="moviehome?mid={{mid}}">
                                    <img onerror="onAlbumPosterError(this)" src="{{MOVIE_BANNER_POSTER banner_poster}}"
                                         style="width: 100%;height: 50vw">
                                </a>
                            {{/if}}
                        </div>
                    {{/each}}
                </div>
                <!-- Pagination, if required -->
                <div class="swiper-pagination color-custom"></div>
            </div>
            <div class="content-block-title"
                 style="text-align: center;background-color: white;margin: 0;"><h2 class="color-black">｜ 精 选 电 影 ｜</h2></div>
            <div class="no-border list-block virtual-list movie-album-list" style="margin-top: 0;"></div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
                <div class="preloader-text">正在加载...</div>
            </div>
        </div>
        <div class="search-effective" style="display: none">
            <div class="list-block media-list virtual-list search-list"></div>
        </div>
    </div>
</div>
<div class="popup popup-filter">
    <p><a href="#" class="close-popup button button-round color-gray" style="height: 26px;margin:0 10px">关闭</a></p>
    <div class="content-block-title" style="text-align: center">类型</div>
    <div class="list-deployable list-block">
        <ul>
            {{#each movie_type}}
                {{#if id}}
                    <li class="list-25  list-inline">
                        <a class="button button-round button-fill color-gray close-popup" href="filtedmovies?mode=1&parameter={{id}}">{{movie_type}}</a>
                    </li>
                {{/if}}
            {{/each}}
            {{#each movie_type_more}}
                {{#if id}}
                    <li class="list-25  list-inline list-hidden">
                        <a class="button button-round button-fill color-gray close-popup" href="filtedmovies?mode=1&parameter={{id}}">{{movie_type}}</a>
                    </li>
                {{/if}}
            {{/each}}
            <li class="list-25  list-inline list-more"><a class="button button-round color-custom">更多</a></li>
        </ul>
    </div>
    <div class="content-block-title" style="text-align: center">国家/地区</div>
    <div class="list-deployable list-block">
        <ul>
            {{#each movie_country}}
                {{#if id}}
                    <li class="list-25  list-inline">
                        <a class="button button-round color-gray close-popup" href="filtedmovies?mode=2&parameter={{id}}">{{movie_country}}</a>
                    </li>
                {{/if}}
            {{/each}}
            {{#each movie_country_more}}
                {{#if id}}
                    <li class="list-25  list-inline list-hidden">
                        <a class="button button-round color-gray close-popup" href="filtedmovies?mode=2&parameter={{id}}">{{movie_country}}</a>
                    </li>
                {{/if}}
            {{/each}}
            <li class="list-25  list-inline list-more"><a class="button button-round color-custom">更多</a></li>
        </ul>
    </div>
</div>

